<template>
	<view>
		<view class="padding">
			<view class="navList bg-white radius-xl padding-xs">
				<u-sticky bgColor="#fff">
          <u-tabs
              lineColor="#ff6600"
              active-color="#ff6600"
              :bar-style="{ backgroundColor: '#ff6600'}"
              :list="navList" :is-scroll="false" :current="navIndex" @change="change"></u-tabs>
				</u-sticky>
			</view>
		</view>

		<!-- 记录列表 -->
		<view class="list padding padding-top-0">
			<view class="bg-white radius-xl padding-sm">
				<view class="item padding-tb" v-for="(item,index) in list" :key="index" :class="index != [list.length -1]?'solid-bottom':''">
					<template v-if="item.type == 2">
						<view class="status-icon">
							<text class="text-green cuIcon-roundcheckfill"></text>
						</view>
						<view class="content margin-left">
							<view class="grid col-2 text-bold">
								<view class="status-text text-green">
									{{ item.status === 0 ? '提现中' : item.status === 1 ? '提现成功' : '提现失败' }}
								</view>
								<view class="text-right text-red">￥{{item.amount}}</view>
							</view>
							<view class="text-sm text-gray desc-content">
								<view class="time">
									提现时间：{{item.create_time}}
								</view>
							</view>
						</view>
					</template>
					<template v-else>
						<view class="status-icon">
							<text class="text-green cuIcon-formfill"></text>
						</view>
						<view class="content margin-left">
							<view class="grid col-2 text-bold">
								<view class="status-text text-green">
									{{ item.desc }}
								</view>
								<view class="text-right text-red">￥{{item.amount}}</view>
							</view>
							<view class="text-sm text-gray desc-content">
								<view class="order-no">
									订单编号：{{item.order_no}}
								</view>
								<view class="time">
									支付时间：{{item.create_time}}
								</view>
							</view>
						</view>
					</template>
				</view>

				<emptyData v-if="list.length === 0" type="notLog" top="10" text="暂无记录"></emptyData>
			</view>
      <Loading v-if="pageLoading"/>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navIndex:0,
				navList:[
					{name:'收入',scene:1},
					{name:'支出',scene:2},
				],
				current_page:1,
				list:[
        ],
        userInfo: {},
        pageLoading: false
			};
		},
		onLoad() {
      this.userInfo = uni.getStorageSync('userInfo') || {}
      console.log(this.userInfo)
      if (!this.userInfo.id) return
			this.getList();
		},
		methods:{
			getList(){
        this.pageLoading = true
				this.$http.getStaffBalanceList({
          type: this.navList[this.navIndex].scene,
          staff_id: this.userInfo.id,
        }).then(res=>{
          this.list = res
          this.pageLoading = false
        })
			},
      change(e){
        console.log(e)
				this.navIndex = e;
				this.getList();
			}
		}
	}
</script>

<style lang="less" scoped>
.list{
	.item{
		display: flex;
		align-items: center;
		.status-icon{
			text{
				font-size: 50upx;
			}
		}
		.content{
			flex: 1;
			.status-text{
				font-size: 30upx;
			}
			.desc-content{
				padding-top: 12upx;
				line-height: 35upx;
			}
		}
	}
}
</style>
